{% extends "base_generic.html" %}
{% load static %}
{% load i18n %}

{% block content %}
<h1>{% trans "Book List" %}</h1>

  {% if book_list %}
    <form method="post" action="{% url 'batch-favorite' %}">
      {% csrf_token %}
      <button type="button" class="btn btn-secondary btn-sm mb-2" onclick="toggleAllFavorites(true)">{% trans 'Select All' %}</button>
      <button type="button" class="btn btn-secondary btn-sm mb-2" onclick="toggleAllFavorites(false)">{% trans 'Deselect All' %}</button>
      <select name="group_id" class="form-select form-select-sm mb-2" style="width:auto;display:inline-block;">
        <option value="">{% trans "No Group" %}</option>
        {% for group in favorite_groups %}
          <option value="{{ group.id }}">{{ group.name }}</option>
        {% endfor %}
      </select>
      <button type="submit" class="btn btn-primary btn-sm mb-2">{% trans "Batch Favorite" %}</button>
      <div class="row row-cols-1 row-cols-md-3 g-4">
        {% for book in book_list %}
          <div class="col">
            <div class="card h-100 shadow-sm">
              <div class="position-relative">
                <input type="checkbox" name="favorite_ids" value="{{ book.id }}" class="form-check-input position-absolute top-0 start-0 m-2 batch-checkbox">
                {% if book.image %}
                  <img src="{{ book.image.url }}" class="card-img-top" alt="{{ book.title }} {% trans 'Cover' %}" style="height: 200px; object-fit: contain; padding: 10px;">
                {% else %}
                  <img src="{% static 'images/default_book_cover.png' %}" class="card-img-top" alt="{% trans 'Default Cover' %}" style="height: 200px; object-fit: contain; padding: 10px;">
                {% endif %}
              </div>
              <div class="card-body d-flex flex-column">
                <h5 class="card-title text-center"><a href="{% url 'catalog:book-detail' book.pk %}">{{ book.title }}</a></h5>
                <p class="card-text text-muted text-center">{{ book.author }}</p>
                {% if book.favorite_group_name %}
                  <p class="card-text text-muted text-center">{{ book.favorite_group_name }}</p>
                {% endif %}
              </div>
            </div>
          </div>
        {% endfor %}
      </div>
    </form>
    <nav aria-label="Page navigation" class="mt-4">
          <ul class="pagination justify-content-center">
              {% if page_obj.has_previous %}
                  <li class="page-item"><a class="page-link" href="?page={{ page_obj.previous_page_number }}&sort={{ sort }}&order={{ order }}">{% trans "Previous" %}</a></li>
              {% endif %}
              <li class="page-item disabled"><span class="page-link">{% trans "Page" %} {{ page_obj.number }} {% trans "of" %} {{ page_obj.paginator.num_pages }}</span></li>
              {% if page_obj.has_next %}
                  <li class="page-item"><a class="page-link" href="?page={{ page_obj.next_page_number }}&sort={{ sort }}&order={{ order }}">{% trans "Next" %}</a></li>
              {% endif %}
          </ul>
      </nav>
  {% else %}
    <p>{% trans "There are no books in the library." %}</p>
  {% endif %}

<script>
function toggleAllFavorites(checked) {
  document.querySelectorAll('input[name="favorite_ids"]').forEach(cb => cb.checked = checked);
}
</script>
{% endblock %}
